<template>
  <div>
    <!-- 月累计产量排名 -->
    <Echart
      id="centerRightChart1"
      :options="options1"
      height="320px"
      width="100%"
    />
  </div>
</template>

<script>
import Echart from '@/common/echart'

var option

const data = []
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200))
}
option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2 // only the largest 3 bars will be displayed
  },
  series: [
    {
      realtimeSort: true,
      name: 'X',
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  animationDuration: 0,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
}

function run() {
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000)
    } else {
      data[i] += Math.round(Math.random() * 200)
    }
  }
  // myChart.setOption({
  //   series: [
  //     {
  //       type: 'bar',
  //       data
  //     }
  //   ]
  // });
}

setTimeout(function() {
  run()
}, 0)
setInterval(function() {
  run()
}, 3000)
export default {
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {},
      options1: option,
      options12: {}
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          tooltip: {
            trigger: 'axis',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, .2)',
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            backgroundColor: 'rgba(50,50,50,0.5)',
            textStyle: {
              color: '#FFF'
            },
            borderWidth: 0,
            // backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              // type: "shadow",
              type: 'cross',
              crossStyle: {
                color: '#008acd'
              },
              shadowStyle: {
                color: 'rgba(200,200,200,0.2)'
              },
              label: {
                show: true,
                backgroundColor: '#7B7DDC'
              }
            }
          },
          legend: {
            data: ['产量（重量箱）', '总成品率', '一级品率'],
            textStyle: {
              color: '#B4B4B4'
            },
            top: '0%'
          },
          grid: {
            x: '9%',
            width: '86%',
            y: '4%'
          },
          xAxis: {
            data: newData.category,
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4'
                }
              },

              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4'
                }
              },
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [
            {
              name: '产量（重量箱）',
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 8,
              // yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#F02FC2'
                }
              },
              data: newData.rateData
            },
            {
              name: '一级品率',
              type: 'bar',
              barWidth: 10,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  borderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#956FD4' },
                    { offset: 1, color: '#3EACE5' }
                  ])
                }
              },
              data: newData.perfectData
            },
            {
              name: '总成品率',
              type: 'bar',
              barGap: '-100%',
              barWidth: 10,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  borderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(156,107,211,0.8)' },
                    { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
                    { offset: 1, color: 'rgba(156,107,211,0.2)' }
                  ])
                }
              },
              z: -12,
              data: newData.allData
            }
          ]
        }
        this.options2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value'
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: [
                '12-26',
                '12-27',
                '12-28',
                '12-29',
                '12-30',
                '12-31',
                '01-01',
                '01-02',
                '01-03',
                '01-04',
                '01-05',
                '01-06'
                // "01-07",
                // "01-08",
                // "01-09",
                // "01-10",
                // "01-11",
                // "01-12",
                // "01-13",
                // "01-14",
                // "01-15",
                // "01-16",
                // "01-17",
                // "01-18",
                // "01-19",
                // "01-20",
                // "01-21",
                // "01-22",
                // "01-23",
                // "01-24",
                // "01-25",
              ]
            }
          ],
          series: [
            {
              name: '甲班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                normal: {
                  borderRadius: 0,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#c292ad' },
                    { offset: 1, color: '#956FD4' }
                  ])
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [0, 132, 101, 0, 90, 230, 0, 90, 230, 0],
              markLine: {
                lineStyle: {
                  type: 'dashed'
                },
                data: [[{ type: 'min' }, { type: 'max' }]]
              }
            },
            {
              name: '乙班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                normal: {
                  borderRadius: 0,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#19be6b' },
                    { offset: 1, color: '#a3d89f' }
                  ])
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 0, 191, 234, 0, 330, 310, 0, 290, 330, 310]
            },
            {
              name: '丙班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                normal: {
                  // borderRadius: [10,10,0,0],
                  borderRadius: 0,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#956FD4' },
                    { offset: 1, color: '#3EACE5' }
                  ])
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 0, 154, 190, 0, 410, 154, 0, 330, 410]
            },
            {
              name: '总成品率',
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 8,
              // yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#F02FC2'
                }
              },
              data: [
                236,
                339,
                236,
                435,
                337,
                336,
                132,
                336,
                239,
                232,
                236,
                336,
                236,
                432,
                236
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
